<template>
  <div calss="container">
    <ul>
      <li @click="toPageHome">home</li>
      <!-- <li><router-link to="/tabs/my">my</router-link></li> -->
      <li @click="toPageMy">Es6</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 方法集合
  methods: {
    toPageHome() {
      this.$router
        .push({ path: "/tabs/home", query: { id: 123 } }) // 刷新后不会消失,但是是跟在地址栏中的,所以不安全
        .catch((err) => {});
    },
    toPageMy() {
      // this.$router.push({ name: "my", params: { id: 321 } }).catch((err) => {}); // 刷新后会消失,只能获取一次
      this.$router.push({ name: "my", query: { id: 321 } }).catch((err) => {}); // 刷新后不会消失,但是是跟在地址栏中的,所以不安全
    },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {},
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: {},
};
</script>
<style lang='less' scoped>
ul {
  display: flex;
  li {
    margin: 0 15px;
  }
}
</style>
